<template>
  <!-- 纵向标题加横排按钮布局 -->
  <view style="width: 100%">
    <template v-if="menuList.length > 0">
      <view v-for="(child, childIndex) in newMenuList" :key="childIndex" class="drop-down-box">
        <view class="title-box">
          <text :style="{ fontSize: itemFontSize, color: inactiveColor }">{{ child.label }}</text>
        </view>
        <view class="drop-down-list">
          <view
            v-for="(item, index) in child.child"
            :key="index"
            class="drop-down-item"
            :style="{ background: itemBackground, border: `1px solid ${child.defaultValue.includes(item.value) ? activeColor : itemBackground}` }"
            @click.stop.passive="subItemClick(item, child.key, childIndex, index)"
          >
            <text class="item-text" :style="{ fontSize: itemFontSize, color: child.defaultValue.includes(item.value) ? activeColor : inactiveColor }">
              {{ item.label }}
            </text>
          </view>
        </view>
      </view>
    </template>
    <template v-else>
      <view style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%" :style="{ height: menuHeight }">
        <image src="../../mxp-tool/static/images/global-state/not-data.svg" style="width: 120px; height: 120px" mode="scaleToFill"></image>
        <view>
          <text style="font-size: 14px" :style="{ color: inactiveColor }">暂无可选数据</text>
        </view>
      </view>
    </template>
  </view>
</template>

<script lang="ts" setup>
  import type { $AllColorStr, $SizeUnitStr } from '@/mxp-ui/mxp-tool/types/interface';
  import { type PropType, computed } from 'vue';
  import type { $TrimDropDownMultipleListLevel2Item } from './type';
  defineOptions({
    name: 'item-type4',
  });

  const props = defineProps({
    /** 当 type 为 1,2,3,4 有效 */
    isAlone: { type: Boolean, required: true },
    /** 每一项的筛选数据 */
    menuList: { type: Object as PropType<$TrimDropDownMultipleListLevel2Item[]>, required: true },
    /** 未选中颜色 */
    inactiveColor: { type: String as PropType<$AllColorStr>, required: true },
    /** 选中颜色颜色 */
    activeColor: { type: String as PropType<$AllColorStr>, required: true },
    /** 筛选列表的高度 */
    menuHeight: { type: String as PropType<$SizeUnitStr>, required: true },
    /** 筛选 列表的每一项 的文字大小 */
    itemFontSize: { type: String as PropType<$SizeUnitStr>, required: true },
    /** 筛选列表每一项的背景色（仅针对 type为 2,3,4,7 有效） */
    itemBackground: { type: String as PropType<$AllColorStr>, required: true },
    /** 默认选中 */
    defaultValue: { type: [Array, Object] as PropType<Record<number | string, unknown[]> | unknown[] | undefined>, default: undefined },
  });
  const emits = defineEmits<{
    (e: 'click', selected: $TrimDropDownMultipleListLevel2Item['child'][number], key: number | string, menuIndex: number, menuChildIndex: number): void;
  }>();
  type $newListItem = $TrimDropDownMultipleListLevel2Item & { defaultValue: unknown[] };
  const newMenuList = computed<$newListItem[]>(() => {
    const list = props.menuList.filter((item) => item.child.length > 0) as $newListItem[];
    if (props.isAlone) {
      list.forEach((item) => {
        const olddef = props.defaultValue as Record<number | string, unknown[]>;
        item.defaultValue = olddef[item.key] ? olddef[item.key]! : [];
      });
    } else {
      list.forEach((item) => {
        item.defaultValue = props.defaultValue as unknown[];
      });
    }
    return list;
  });

  /** 点击事件 */
  function subItemClick(item: $TrimDropDownMultipleListLevel2Item['child'][number], key: number | string, menuIndex: number, menuChildIndex: number) {
    emits('click', item, key, menuIndex, menuChildIndex);
  }
</script>

<style scoped lang="scss">
  .drop-down-box {
    padding: 0 8px;

    .title-box {
      width: 100%;
      padding: 6px 15px;
    }

    .drop-down-list {
      display: flex;
      flex-flow: row wrap;
      align-items: center;
      justify-content: flex-start;

      .drop-down-item {
        display: inline-flex;
        flex-flow: row wrap;
        align-items: center;
        justify-content: space-between;
        padding: 6px 15px;
        margin: 6px;
        color: #333333;
        border: 1px solid #e5e5e5;
        border-radius: 4px;
      }
    }
  }
</style>
